<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
      <el-breadcrumb-item>添加商品</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card">
      <el-alert
        title="添加修改会删除缓存，请谨慎操作"
        type="warning"
        center
        show-icon
      ></el-alert>
      <el-alert title="添加商品" type="info" center show-icon> </el-alert>
      <el-steps
        :space="200"
        :active="stepActiveInedex - 0"
        align-center
        finish-status="success"
      >
        <el-step title="基本信息"></el-step>
        <el-step title="商品类型"></el-step>
        <el-step title="商品静态参数"></el-step>
        <el-step title="商品动态参数"></el-step>
        <el-step title="商品图片"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>

      <el-form
        :model="addForm"
        :rules="addFormRules"
        ref="addFormRef"
        label-width="100px"
        label-position="top"
      >
        <el-tabs
          v-model="stepActiveInedex"
          :tab-position="tablePositon"
          :before-leave="beforeLeave"
        >
          <el-tab-pane name="0" label="基本信息">
            <el-form-item label="商品名称:" prop="name" label-width="100px">
              <el-input v-model="addForm.name" class="inp"></el-input>
            </el-form-item>
            <el-form-item
              label="商品老价格:"
              prop="oldPrice"
              label-width="100px"
            >
              <el-input
                type="number"
                v-model.number="addForm.oldPrice"
                class="inp"
              ></el-input>
            </el-form-item>
            <el-form-item label="商品价格:" prop="price" label-width="100px">
              <el-input
                type="number"
                v-model.number="addForm.price"
                class="inp"
              ></el-input>
            </el-form-item>
            <el-form-item label="商品数量:" prop="num" label-width="100px">
              <el-input
                type="number"
                v-model.number="addForm.num"
                class="inp"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="商品重量(kg):"
              prop="weight"
              label-width="100px"
            >
              <el-input
                type="number"
                v-model.number="addForm.weight"
                class="inp"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="商品库存:"
              prop="inventory"
              label-width="100px"
            >
              <el-input
                type="number"
                v-model.number="addForm.inventory"
                class="inp"
              ></el-input>
            </el-form-item>
          </el-tab-pane>

          <el-tab-pane name="1" label="商品类型">
            <el-form-item label="商品分类:" label-width="100px">
              <el-cascader
                expand-trigger="hover"
                v-model="addCascader"
                :options="goodsTypeList"
                :props="addCascaderProps"
                clearable
                @change="addCascaderHandleChange"
              ></el-cascader>
            </el-form-item>
            <el-form-item label="商品选择:" label-width="100px">
              <el-select v-model="addForm.goodsSelect" placeholder="请选择">
                <el-option
                  v-for="item in goodsSelectList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="商品品牌:" label-width="100px">
              <el-select v-model="addForm.goodsBrank" placeholder="请选择">
                <el-option
                  v-for="item in goodsBrankList"
                  :key="item.id + ''"
                  :label="item.brankName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-tab-pane>

          <el-tab-pane name="2" label="商品静态参数">
            <div>
              <el-form-item label="型号:" prop="model" label-width="100px">
                <el-input
                  v-model="addForm.model"
                  class="inp"
                ></el-input>
              </el-form-item>

              <el-form-item
                label="适用年龄:"
                prop="suitAge"
                label-width="100px"
              >
                <el-select
                  v-model="addForm.suitAge"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in suitAgeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item
                label="适用人群:"
                prop="suitPer"
                label-width="100px"
              >
                <el-select
                  v-model="addForm.suitPer"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in suitPerOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="产品编号:" prop="certificateNo" label-width="100px">
              <el-input v-model="addForm.certificateNo" class="inp"></el-input>
            </el-form-item>

              <el-form-item label="介绍:" prop="introduce" label-width="100px">
                <el-input
                  v-model="addForm.introduce"
                  class="inp"
                ></el-input>
              </el-form-item>

              <el-form-item
                label="发货地/生产地:"
                prop="production"
                label-width="100px"
              >
                <el-input
                  v-model="addForm.production"
                  class="inp"
                ></el-input>
              </el-form-item>

              <el-row>
                <el-col :span="24">
                  <el-button
                    class="goodstypebut"
                    type="primary"
                    size="mini"
                    @click="addStaticCustomShow"
                    >添加动态参数</el-button
                  >
                </el-col>
              </el-row>

              <el-table
      :data="addForm.addStaticCustomList"
      border stripe>
      <el-table-column
        prop="keyName"
        label="静态参数名称">
      </el-table-column>
      <el-table-column
        prop="valueName"
        label="静态参数值">
      </el-table-column>
      <el-table-column
        label="删除">
        <template slot-scope="scope">
                    <el-button
                      @click="delStaticCustom(scope.row)"
                      type="danger"
                      size="mini"
                      >删除</el-button
                    >
                  </template>
      </el-table-column>
    </el-table>
            </div>
          </el-tab-pane>

          <el-tab-pane name="3" label="商品动态参数">
            <el-row>
              <el-col :span="5">是否配置动态参数: </el-col>
              <el-col :span="5"
                ><el-switch
                  @change="handleDynamicParam"
                  v-model="dynamicParamShow"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                >
                </el-switch
              ></el-col>
            </el-row>
            <div v-if="dynamicParamShow">
              <el-row>
                <el-col :span="24">
                  <el-button
                    class="goodstypebut"
                    type="primary"
                    size="mini"
                    @click="addDynamicParamSpecsShow"
                    >添加动态参数</el-button
                  >
                </el-col>
              </el-row>

              <el-table :data="addForm.specsList" border stripe>
                <el-table-column prop="id" label="id"></el-table-column>
                <el-table-column prop="name" label="参数名称"></el-table-column>
                <el-table-column label="参数列表">
                  <template slot-scope="scope">
                    <span v-for="tag in scope.row.values" :key="tag.id"
                      ><el-tag>{{ tag.name }}</el-tag></span
                    >
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="180px">
                  <template slot-scope="scope">
                    <el-button
                      @click="addDynamicParamSpecsDialogShow(scope.row.id)"
                      type="primary"
                      size="mini"
                      >添加</el-button
                    >
                    <el-button
                      @click="delDynamicParamSpecsValue(scope.row.id)"
                      type="warning"
                      size="mini"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>

              <el-table :data="addForm.skusList" border stripe>
                <el-table-column
                  label="图片"
                >
                <template slot-scope="scope">
                  <el-image
      style="width: 100px; height: 100px"
      :src="scope.row.picture"
      :fit="fits[0]"></el-image>
                </template>
              </el-table-column>
                <el-table-column prop="id" label="id"></el-table-column>
                <el-table-column
                  prop="oldPrice"
                  label="旧价格"
                ></el-table-column>
                <el-table-column prop="price" label="新价格"></el-table-column>
                <el-table-column
                  prop="inventory"
                  label="库存"
                ></el-table-column>
                <el-table-column prop="isUse" label="启用">
                  <template slot-scope="scope">
                    <el-switch
                      @change="editSkusIsuse(scope.row.id)"
                      v-model="scope.row.isUse"
                      :active-value="1"
                      :inactive-value="0"
                      active-color="#13ce66"
                      inactive-color="#ff4949"
                    >
                    </el-switch>
                  </template>
                </el-table-column>
                <el-table-column label="动态参数选项">
                  <template slot-scope="scope">
                    <span v-for="tag in scope.row.specs" :key="tag.id"
                      ><el-tag
                        >{{ tag.name }}：{{ tag.valueName }}</el-tag
                      ></span
                    >
                  </template>
                </el-table-column>

                <el-table-column label="新价格">
                  <template slot-scope="scope">
                    <el-button
                      @click="editSkusShow(scope.row.id)"
                      type="primary"
                      size="mini"
                      >修改</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>

          <el-tab-pane name="4" label="商品图片">
            <div class="imgclass">
              <span>主要图片:</span>
              <el-upload
                class="avatar-uploader"
                :headers="headObj"
                :action="updateImgUrl"
                :show-file-list="false"
                :on-remove="handleRemoveMainPic"
                :on-success="handleMainPicSuccess"
              >
                <img
                  v-if="this.addForm.mainPic"
                  :src="this.addForm.mainPic"
                  class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
              <span>列表图片:</span>
              <el-upload
                class="upload-demo"
                :headers="headObj"
                :action="updateImgUrl"
                :on-preview="handlePreview"
                :on-remove="handleRemovePicList"
                :on-success="handleSuccessPicList"
                list-type="picture"
              >
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">
                  只能上传jpg/png文件，且不超过500kb
                </div>
              </el-upload>
            </div>
          </el-tab-pane>
          <el-tab-pane name="5" label="完成">
            <el-row>
              <el-col :span="5">是否启用: </el-col>
              <el-col :span="5"></el-col>
                <el-switch
                  v-model="addForm.goodsState"
                  @change="handleGoodsState"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-value="1"
                  inactive-value="0">
                </el-switch>
            </el-row>
            <el-row>
              <el-button type="primary" @click="addGoodsSubmit">添加商品</el-button>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </el-card>

    <el-dialog
      title="添加动态参数"
      :visible.sync="addDynamicParamSpecsDialogVisible"
      @close="addDynamicParamSpecsClose"
      width="50%"
    >
      <el-input
        v-model="addDynamicParamSpecsParam"
        placeholder="请输入内容"
      ></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDynamicParamSpecsDialogVisible = false"
          >取 消</el-button
        >
        <el-button type="primary" @click="addDynamicParamSpecsSubmit"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <el-dialog
      title="添加动态参数值"
      :visible.sync="addDynamicParamSpecsValueDialogVisible"
      @close="addDynamicParamSpecsValueClose"
      width="50%"
    >
      <el-form
        :model="addDynamicParamSpecsValueParam"
        :rules="addDynamicParamSpecsValueFormRules"
        ref="addDynamicParamSpecsValueParamFormRef"
        label-width="80px"
      >
        <el-form-item label="名称" prop="name">
          <el-input v-model="addDynamicParamSpecsValueParam.name"></el-input>
        </el-form-item>

        <el-form-item label="描述" prop="desc">
          <el-input v-model="addDynamicParamSpecsValueParam.desc"></el-input>
        </el-form-item>

        <el-form-item label="图片(可以为空):">
          <el-upload
            class="avatar-uploader"
            :headers="headObj"
            :action="updateImgUrl"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
          >
            <img
              v-if="this.addDynamicParamSpecsValueParam.picture"
              :src="this.addDynamicParamSpecsValueParam.picture"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDynamicParamSpecsValueDialogVisible = false"
          >取 消</el-button
        >
        <el-button type="primary" @click="addDynamicParamSpecsValueSubmit"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <el-dialog
      title="修改动态参值配置列表"
      :visible.sync="editSkusDialogVisible"
      @close="editSkusDialogClose"
      width="50%"
    >
      <el-form
        :model="editSkusForm"
        :rules="editSkusFormRules"
        ref="editSkusFormRef"
        label-width="80px"
      >
        <el-form-item label="旧价格" prop="oldPrice">
          <el-input
            type="number"
            v-model.number="editSkusForm.oldPrice"
          ></el-input>
        </el-form-item>

        <el-form-item label="价格" prop="price">
          <el-input
            type="number"
            v-model.number="editSkusForm.price"
          ></el-input>
        </el-form-item>

        <el-form-item label="库存" prop="inventory">
          <el-input
            type="number"
            v-model.number="editSkusForm.inventory"
          ></el-input>
        </el-form-item>
        <!-- //---------------------------------------------------------------------------------------------------------- -->
        <el-form-item label="图片(可以为空):">
          <el-upload
            class="avatar-uploader"
            :headers="headObj"
            :action="updateImgUrl"
            :show-file-list="false"
            :on-success="handleSkuSuccess"
          >
            <img
              v-if="this.editSkusForm.picture"
              :src="this.editSkusForm.picture"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <!-- <el-form-item label="图片(可以为空):">
          <el-upload
            class="avatar-uploader"
            :headers="headObj"
            :action="updateImgUrl"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
          >
            <img
              v-if="this.addDynamicParamSpecsValueParam.picture"
              :src="this.addDynamicParamSpecsValueParam.picture"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editSkusInventoryDialogVisible = false"
          >取 消</el-button
        >
        <el-button type="primary" @click="editSkusSubmit">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="图片展示"
      :visible.sync="previewDialogVisible"
      @close="previewDialogclose"
      width="80%"
    >
      <img :src="previewPath" class="previewImg" />
    </el-dialog>

    <el-dialog
      title="自定义静态属性"
      :visible.sync="addStaticCustomVisible"
      @close="addStaticCustomClose"
      width="80%"
    >
    <el-form
        :model="addStaticCustomForm"
        :rules="addStaticCustomRules"
        ref="addStaticCustomRef"
        label-width="80px"
      >
      <el-form-item label="静态参数名称" prop="keyName">
          <el-input v-model="addStaticCustomForm.keyName"></el-input>
        </el-form-item>

        <el-form-item label="静态参数值" prop="valueName">
          <el-input v-model="addStaticCustomForm.valueName"></el-input>
        </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="addStaticCustomVisible = false"
          >取 消</el-button
        >
        <el-button type="primary" @click="addStaticCustomSubmit"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getGoodsTypeList } from '@/api/goodsType'
import { getGoodsSelectList } from '@/api/goodsSelect'
import { UploadImgDel } from '@/api/uploadImg'
import { adminAddGoodsData } from '@/api/goods'
// import { nanoid } from 'nanoid'
import {
  dstoolGetDynamicParamAll,
  dstoolAddDynamicParamSpecs,
  dstoolAddDynamicParamSpecsValue,
  editSkusIsuseData,
  getSkusByIdData,
  updateSkusData,
  dstoolDelDynamicParamSpecs
} from '@/api/dictionary'
import { getGoodsBrankData } from '@/api/goodsBrank'
export default {
  name: 'GoodsAdd',
  data () {
    return {
      fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
      updateImgUrl: 'http://192.168.10.1:6002/admin/dictionary/file/UploadImg',
      headObj: {
        AdminAuthorizationToken: this.$store.getters.token
      },
      stepActiveInedex: '0',
      tablePositon: 'left',
      addStaticCustomVisible: false,
      addForm: {
        name: '',
        oldPrice: 0,
        price: 0,
        num: 0,
        weight: 0,
        inventory: 0,
        goodsType: 0,
        goodsSelect: '',
        goodsBrank: '',
        dynamicParam: 0,
        specsList: [],
        skusList: [],
        mainPic: '',
        listPic: [],
        model: '',
        suitAge: '',
        suitPer: '',
        certificateNo: '',
        production: '',
        introduce: '',
        goodsState: 1,
        addStaticCustomList: []
      },
      addStaticCustomForm: {
        keyName: '',
        valueName: ''
      },
      addStaticCustomRules: {
        keyName: [
          { required: true, message: '请输入静态参数名称', expandTrigger: 'blur' },
          {
            min: 2,
            max: 50,
            message: '长度在 2 到 50 个字符',
            expandTrigger: 'blur'
          }
        ],
        valueName: [
          { required: true, message: '静态参数值', expandTrigger: 'blur' },
          {
            min: 2,
            max: 50,
            message: '长度在 2 到 50 个字符',
            expandTrigger: 'blur'
          }
        ]
      },
      suitAgeOptions: [
        {
          value: '3-12岁',
          label: '3-12岁'
        },
        {
          value: '3-14岁',
          label: '3-14岁'
        },
        {
          value: '14-70岁',
          label: '14-70岁'
        }
      ],
      suitPerOptions: [
        {
          value: '儿童',
          label: '儿童'
        },
        {
          value: '成人',
          label: '成人'
        },
        {
          value: '老人',
          label: '老人'
        }
      ],
      addCascader: [],
      addCascaderProps: {
        value: 'id',
        label: 'name',
        children: 'children'
      },
      addFormRules: {
        name: [
          { required: true, message: '请输入商品名称', expandTrigger: 'blur' },
          {
            min: 2,
            max: 50,
            message: '长度在 2 到 50 个字符',
            expandTrigger: 'blur'
          }
        ],
        price: [
          { required: true, message: '请输入商品价格', trigger: 'blur' },
          { type: 'number', message: '商品价格为数字值' }
        ],
        oldPrice: [
          { required: true, message: '请输入旧商品价格', trigger: 'blur' },
          { type: 'number', message: '旧商品价格为数字值' }
        ],
        num: [
          { required: true, message: '请输入商品数量', trigger: 'blur' },
          { type: 'number', message: '数量为数字值' }
        ],
        weight: [
          { required: true, message: '请输入商品重量', trigger: 'blur' },
          { type: 'number', message: '重量为数字值' }
        ],
        inventory: [
          { required: true, message: '请输入商品库存', trigger: 'blur' },
          { type: 'number', message: '库存为数字值' }
        ],
        model: [
          { required: true, message: '请输入商品型号', expandTrigger: 'blur' },
          {
            min: 2,
            max: 25,
            message: '长度在 2 到 25 个字符',
            expandTrigger: 'blur'
          }
        ],
        // certificateNo: [
        //   { required: true, message: '请输入产品编号', expandTrigger: 'blur' },
        //   {
        //     min: 2,
        //     max: 50,
        //     message: '长度在 2 到 50 个字符',
        //     expandTrigger: 'blur'
        //   }
        // ],
        certificateNo: [
          { required: true, message: '请输入产品编号', expandTrigger: 'blur' },
          {
            min: 2,
            max: 50,
            message: '长度在 2 到 50 个字符',
            expandTrigger: 'blur'
          }
        ],
        production: [
          {
            required: true,
            message: '请输入发货地/生产地',
            expandTrigger: 'blur'
          },
          {
            min: 2,
            max: 25,
            message: '长度在 2 到 25 个字符',
            expandTrigger: 'blur'
          }
        ],
        introduce: [
          { required: true, message: '请输入介绍', expandTrigger: 'blur' },
          {
            min: 2,
            max: 200,
            message: '长度在 2 到 200 个字符',
            expandTrigger: 'blur'
          }
        ]
      },
      goodsTypeList: [],
      goodsSelectList: [],
      goodsBrankList: [],
      dynamicParamShow: false,
      addDynamicParamSpecsDialogVisible: false,
      addDynamicParamSpecsParam: '',
      markId: '',
      addDynamicParamSpecsValueDialogVisible: false,
      addDynamicParamSpecsValueParam: {
        markId: '',
        parentId: '',
        name: '',
        picture: '',
        desc: ''
      },
      addDynamicParamSpecsValueFormRules: {
        name: [
          { required: true, message: '请输入动态参数值名称', trigger: 'blur' },
          {
            min: 2,
            max: 10,
            message: '长度在 2 到 10 个字符',
            trigger: 'blur'
          }
        ],
        desc: [
          { required: true, message: '请输入动态参数值描述', trigger: 'blur' },
          {
            min: 2,
            max: 30,
            message: '长度在 2 到 30 个字符',
            trigger: 'blur'
          }
        ]
      },
      editSkusDialogVisible: false,
      editSkusForm: {
        id: 0,
        oldPrice: 0,
        price: 0,
        inventory: 0,
        markId: '',
        picture: ''
      },
      editSkusFormRules: {
        oldPrice: [
          { required: true, message: '请输入旧价格', trigger: 'blur' },
          { type: 'number', message: '旧价格为数字值' }
        ],
        price: [
          { required: true, message: '请输入价格', trigger: 'blur' },
          { type: 'number', message: '价格为数字值' }
        ],
        inventory: [
          { required: true, message: '请输入库存', trigger: 'blur' },
          { type: 'number', message: '库存为数字值' }
        ]
      },
      previewDialogVisible: false,
      previewPath: ''
    }
  },
  methods: {
    async dstoolGetDynamicParamAllData () {
      const res = await dstoolGetDynamicParamAll(this.markId)
      console.log(res.data.specsList)
      this.addForm.specsList = res.data.specsList
      this.addForm.skusList = res.data.skusList
    },
    async getGoodsTypeData () {
      const res = await getGoodsTypeList()
      this.goodsTypeList = res.data
    },
    async getGoodsBrank () {
      const res = await getGoodsBrankData()
      this.goodsBrankList = res.data
    },
    async getGoodsSelectData () {
      const res = await getGoodsSelectList()
      this.goodsSelectList = res.data
    },
    addCascaderHandleChange () {
      if (this.addCascader.length === 3) {
        this.addForm.goodsType = this.addCascader[2]
        console.log(this.addForm.goodsType)
      }
      if (this.addCascader.length === 0) {
        this.addForm.goodsType = 0
        console.log(this.addForm.goodsType)
      }
    },
    beforeLeave (activeName, oldActiveName) {
      let checkoutFlag = true
      // if (oldActiveName === '0') {
      //   this.$refs.addFormRef.validate((valid) => {
      //     if (!valid) {
      //       this.$message.error('请完成表单')
      //       checkoutFlag = false
      //     }
      //   })
      // }
      if (oldActiveName === '1') {
        if (this.addForm.goodsType === 0) {
          this.$message.error('请选择商品分类')
          checkoutFlag = false
        }
        if (this.addForm.goodsSelect === '') {
          this.$message.error('请选择商品选择类')
          checkoutFlag = false
        }
      }
      if (checkoutFlag === false) {
        return false
      }
    },
    handleDynamicParam () {
      if (this.dynamicParamShow === true) {
        this.addForm.dynamicParam = 1
      } else {
        this.addForm.dynamicParam = 0
      }
      // console.log(this.addForm.dynamicParam)
    },
    handleGoodsState () {
      // if (this.dynamicParamShow === true) {
      //   this.addForm.dynamicParam = 1
      // } else {
      //   this.addForm.dynamicParam = 0
      // }
      console.log(this.addForm.goodsState)
    },
    addDynamicParamSpecsClose () {
      this.addDynamicParamSpecsDialogVisible = false
      this.addDynamicParamSpecsParam = ''
    },
    addDynamicParamSpecsShow () {
      this.addDynamicParamSpecsDialogVisible = true
    },
    async addDynamicParamSpecsSubmit () {
      const res = await dstoolAddDynamicParamSpecs(
        this.markId,
        this.addDynamicParamSpecsParam
      )
      this.$message.success(res.data)
      this.addDynamicParamSpecsDialogVisible = false
      this.addDynamicParamSpecsParam = ''
      this.dstoolGetDynamicParamAllData()
    },
    setMarkId () {
      const Rand = Math.random()
      const mineId = Math.round(Rand * 100000000)
      this.markId = mineId
    },
    addDynamicParamSpecsValueClose () {
      this.$refs.addDynamicParamSpecsValueParamFormRef.resetFields()
      this.addDynamicParamSpecsValueParam.parentId = ''
      this.addDynamicParamSpecsValueParam.picture = ''
    },
    async delDynamicParamSpecsValue (id) {
      const res = await dstoolDelDynamicParamSpecs(this.markId, id)
      this.$message.success(res.data)
      this.dstoolGetDynamicParamAllData()
    },
    addDynamicParamSpecsValueSubmit () {
      this.$refs.addDynamicParamSpecsValueParamFormRef.validate(
        async (valid) => {
          if (!valid) return false
          this.addDynamicParamSpecsValueParam.markId = this.markId
          const res = await dstoolAddDynamicParamSpecsValue(
            this.addDynamicParamSpecsValueParam
          )
          this.addDynamicParamSpecsValueDialogVisible = false
          this.$message.success(res.data)
          this.dstoolGetDynamicParamAllData()
        }
      )
    },
    addDynamicParamSpecsDialogShow (id) {
      this.addDynamicParamSpecsValueParam.parentId = id
      this.addDynamicParamSpecsValueDialogVisible = true
    },
    async editSkusIsuse (id) {
      // const data = { id: id, markId: this.markId }
      const res = await editSkusIsuseData(this.markId, id)
      console.log(res.data)
      this.dstoolGetDynamicParamAllData()
    },
    async editSkusShow (id) {
      const res = await getSkusByIdData(this.markId, id)
      this.editSkusForm = res.data
      this.editSkusDialogVisible = true
    },
    editSkusDialogClose () {
      this.$refs.editSkusFormRef.resetFields()
    },
    async editSkusSubmit () {
      this.editSkusForm.markId = this.markId
      console.log(this.editSkusForm)
      console.log(this.editSkusForm.picture)
      const res = await updateSkusData(this.editSkusForm)
      this.$message.success(res.data)
      this.dstoolGetDynamicParamAllData()
      this.$refs.editSkusFormRef.validate(async (valid) => {
        if (!valid) return false
        this.editSkusForm.markId = this.markId
        const res = await updateSkusData(this.editSkusForm)
        this.$message.success(res.data)
        this.dstoolGetDynamicParamAllData()
        this.editSkusDialogVisible = false
      })
    },
    handleAvatarSuccess (response) {
      this.$message.success('上传成功')
      this.addDynamicParamSpecsValueParam.picture = response.data
      console.log(this.editSkusForm.picture)
    },
    handleSkuSuccess (response) {
      this.$message.success('上传成功')
      this.editSkusForm.picture = response.data
      console.log(this.editSkusForm.picture)
    },
    handleMainPicSuccess (response) {
      this.$message.success('上传成功')
      this.addForm.mainPic = response.data
    },
    async handleRemoveMainPic (file) {
      console.log('handleRemoveMainPic')
      const res = await UploadImgDel(file.response.data)
      this.$message.success(res.data)
    },
    async handleRemovePicList (file) {
      const res = await UploadImgDel(file.response.data)
      this.$message.success(res.data)
      const index = this.addForm.listPic.findIndex(
        (item) => item === file.response
      )
      this.addForm.listPic.splice(index, 1)
    },
    handleSuccessPicList (response) {
      this.$message.success('上传成功')
      this.addForm.listPic.push(response.data)
    },
    handlePreview (file) {
      this.previewPath = file.response.data
      this.previewDialogVisible = true
    },
    previewDialogclose () {},
    addStaticCustomShow () {
      this.addStaticCustomVisible = true
    },
    addStaticCustomClose () {
      this.$refs.addStaticCustomRef.resetFields()
    },
    addStaticCustomSubmit () {
      console.log(this.addStaticCustomForm)
      console.log(this.addForm.addStaticCustomList)
      this.$refs.addStaticCustomRef.validate((valid) => {
        if (!valid) return false
        // this.addForm.addStaticCustomList.push(this.addStaticCustomForm)
        const data = {}
        data.keyName = this.addStaticCustomForm.keyName
        data.valueName = this.addStaticCustomForm.valueName
        this.addForm.addStaticCustomList.push(data)
        console.log(this.addStaticCustomForm)
        console.log(this.addForm.addStaticCustomList)
        this.addStaticCustomVisible = false
      })
    },
    delStaticCustom (row) {
      const index = this.addForm.addStaticCustomList.findIndex(item => item.keyName === row.keyName)
      this.addForm.addStaticCustomList.splice(index, 1)
    },
    addGoodsSubmit () {
      this.$refs.addFormRef.validate(async (valid) => {
        if (!valid) {
          this.$message.error('请完成添加表单')
          return false
        }
        const res = await adminAddGoodsData(this.addForm)
        console.log(res.data)
      })
    }
  },
  created () {
    this.getGoodsTypeData()
    this.getGoodsSelectData()
    this.setMarkId()
    console.log(this.markId)
    this.dstoolGetDynamicParamAllData()
    this.getGoodsBrank()
  }
}
</script>

<style scoped lang="less">
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.imgclass {
  border-radius: 4px;
}
.el-button{
  margin-top: 20px;
}
</style>
